<template>
    <section>
        <!--列表-->
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">表格录入</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true">
                    <el-form-item label="更新日期:">
                        <el-select v-model="updateTimeType" size='small' placeholder="申请日期" style="width: 130px">
                            <el-option v-for="item in applicationData" :key="item.value" :label="item.label" :value="item.value"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select value-key="bankName" v-model="bankCodeAndModeCode" placeholder="选择银行" size='small' style="width:160px;">
                            <el-option v-for="item in banksData" :key="item.bankName" :label="item.bankName" :value="item"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click='onSubmit'>搜索</el-button>
                    </el-form-item>
                    <el-form-item class="ml-10">
                        <el-button type="primary" size="small" @click='dialogFormVisible = true;'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 数据列表 -->
                <el-table border :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column prop="autoId" label="ID" width="90"/>
                    <el-table-column label="银行名称">
                        <template slot-scope="scope">
                            {{scope.row.bankName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据日期" width="190">
                        <template slot-scope="scope">
                            {{scope.row.dataRecordTimeStart}}---{{scope.row.dataRecordTimeEnd}}
                        </template>
                    </el-table-column>
                    <el-table-column property="uploadTime" label="上传时间"/>
                    <el-table-column property="validRecordCount" label="有效记录数" width="100"/>
                    <el-table-column property="statusDesc" label="状态"/>
                    <el-table-column property="remark" label="备注"/>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <router-link target="_blank" :to="{ path: `/dataComparison`, query: {autoId: scope.row.autoId}}">
                                <el-button v-if="showbtnbyStatus(scope.row.status).indexOf('匹配结果') !== -1" type="success" size="mini">匹配结果</el-button>
                                <div class="jiesuan" v-if="showbtnbyStatus(scope.row.status).indexOf('匹配结果') !== -1">{{scope.row.notHanldeRecordCount}}单未结算</div>
                            </router-link>
                            <el-button v-if="showbtnbyStatus(scope.row.status).indexOf('开始匹配') !== -1" type="primary" size="mini" @click='triggerCheckFun(scope.row.autoId)'>开始匹配</el-button>
                            <el-button v-if="showbtnbyStatus(scope.row.status).indexOf('删除') !== -1" type="danger" size="mini" @click='deleteBankDataFun(scope.$index,scope.row.autoId)'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>

                <!-- 新增弹窗 -->
                <el-dialog title="新增" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="45%" @close="closeDailog">
                    <el-form>
                        <el-form-item label="银行" :label-width="formLabelWidth">
                            <el-select value-key="bankName" v-model="dailogBankCode" placeholder="选择银行" size='small' style="width:150px;">
                                <el-option v-for="item in banksData" :key="item.bankName" :label="item.bankName" :value="item"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开始结束时间" :label-width="formLabelWidth">
                            <el-date-picker v-model="dailogDataValue" type="daterange" :clearable="clearable" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd' size='small'/>
                        </el-form-item>
                        <el-form-item label="导入" :label-width="formLabelWidth">
                            <el-upload class="upload-demo" :headers="headers" :with-credentials="withCredentials" name="file" :data="postData" ref="upload" :action="uploadURL" :on-change='handleChange' :on-exceed="handleExceed" :on-remove="handleRemove" :on-success='handleSuccess' :file-list="fileList" :limit="1" :before-upload="beforeAvatarUpload" :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过30M</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="formLabelWidth">
                            <el-input v-model.trim="remark" placeholder="请输入备注" clearable size="small" style="width:150px;"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>

            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            updateTimeType: -1, // 时间范围
            // 申请日期data
            applicationData: [
                {
                    value: -1,
                    label: "全部"
                },
                {
                    value: 1,
                    label: "今天"
                },
                {
                    value: 2,
                    label: "昨天"
                },
                {
                    value: 3,
                    label: "过去一周"
                },
                {
                    value: 4,
                    label: "过去一月"
                }
            ],

            bankCodeAndModeCode: {}, // 查询银行 绑定对象
            // 银行名称列表
            banksData: [
                {
                    bankCode: "SHANGHAI",
                    bankName: "上海银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "SHANGHAI",
                    bankName: "上海银行-模板2",
                    modeCode: "M2"
                },
                {
                    bankCode: "SPD",
                    bankName: "浦发银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "SPD",
                    bankName: "浦发银行-模板2",
                    modeCode: "M2"
                },
                {
                    bankCode: "SPD",
                    bankName: "浦发银行-模板3",
                    modeCode: "M3"
                },
                {
                    bankCode: "CIB",
                    bankName: "兴业银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "COMM",
                    bankName: "交通银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "COMM",
                    bankName: "交通银行-模板2",
                    modeCode: "M2"
                },
                {
                    bankCode: "CMBC",
                    bankName: "民生银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "CITI",
                    bankName: "花旗银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "CEB",
                    bankName: "光大银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "CEB",
                    bankName: "光大银行-模板2",
                    modeCode: "M2"
                    // modeName: "模板2"
                },
                {
                    bankCode: "HXB",
                    bankName: "华夏银行-模板1",
                    modeCode: "M1"
                },
                {
                    bankCode: "CGB",
                    bankName: "广发银行-模板1",
                    modeCode: "M1"
                }
            ],
            tableData: [],
            listLoading: false,
            currentPage: 1, // 当前页数
            pageCount: 1, // 总条数

            closeOnClickModal: false,
            dialogFormVisible: false,
            formLabelWidth: "120px",

            dailogBankCode: {}, // 银行code 绑定对象
            clearable: false,
            dailogDataValue: [], // dailog开始结束时间数组
            fileList: [],
            uploadFlag: false,
            uploadURL: `${api.baseURL}/bank_data/import`,
            headers: {
                token: window.sessionStorage.token
            },
            withCredentials: true, // 支持发送 cookie 凭证信息
            postData: {}, // 文件上传附加参数
            remark: "" //备注
        };
    },
    methods: {
        // 状态数组
        showbtnbyStatus(status) {
            const btnArr = [];
            if (status === 3) {
                btnArr.push("匹配结果");
            }
            if (status === 2 || status === 7) {
                btnArr.push("开始匹配");
            }
            if (status === 2 || status === 4 || status === 5 || status === 7) {
                btnArr.push("删除");
            }
            return btnArr;
        },
        // 查询
        onSubmit() {
            this.currentPage = 1; // 将页码置为第一页
            this.getBankDataList(); // 查询银行数据导入记录
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询银行数据导入记录
            this.getBankDataList();
        },
        // 去数据对照页
        toDataComPAge(autoId) {
            if (!autoId) return false;
            this.$router.push({
                path: "dataComparison",
                query: {
                    autoId: autoId
                }
            });
        },
        // 弹窗关闭
        closeDailog() {
            this.dailogDataValue = [];
            this.dailogBankCode = {};
            this.fileList = [];
            this.uploadFlag = false;
            this.remark = "";
        },
        // 弹窗确定按钮
        confirm() {
            if (!this.dailogBankCode.bankCode) {
                this.$message.error("请选择银行!");
                return false;
            }
            if (!this.dailogDataValue.length) {
                this.$message.error("请选择时间段!");
                return false;
            }
            if (!this.uploadFlag) {
                this.$message.error("请上传文件!");
                return false;
            }
            const { bankCode, modeCode } = this.dailogBankCode;
            this.postData.recordTimeStart = this.dailogDataValue[0];
            this.postData.recordTimeEnd = this.dailogDataValue[1];
            this.postData.bankCode = bankCode;
            this.postData.modeCode = modeCode;
            this.postData.remark = this.remark;

            // 请求接口
            this.$refs.upload.submit();
        },
        // 查询银行数据导入记录
        getBankDataList() {
            this.listLoading = true;
            const { bankCode, modeCode } = this.bankCodeAndModeCode;
            api.bankDataList({
                pageSize: 10,
                bankCode: bankCode,
                modeCode: modeCode,
                updateTimeType: this.updateTimeType,
                pageNum: this.currentPage
            }).then(res => {
                this.listLoading = false;

                this.tableData = res.data.list.map(item => {
                    const selectedItem =
                        this.banksData.filter(
                            bankItem =>
                                bankItem.bankCode == item.bankCode &&
                                bankItem.modeCode == item.modeCode
                        )[0] || {};

                    item.bankName =
                        // selectedItem.bankName + "-" + selectedItem.modeName;
                        selectedItem.bankName;
                    return item;
                });
                this.pageCount = res.data.pages;
            });
        },
        handleChange() {
            this.uploadFlag = true;
        },
        handleRemove() {
            this.fileList = [];
            this.uploadFlag = false;
        },
        // 超出上传限制提示
        handleExceed() {
            this.$message.warning("当前限制只能上传 1 个文件");
        },
        handleSuccess(res) {
            // this.dailogBankCode = {};
            if (res.code === 1) {
                this.$message.success("新增成功！");
                // 查询银行数据导入记录
                this.getBankDataList();
                this.dialogFormVisible = false;
            } else {
                this.$message.error(res.message);
            }
        },
        // 上传文件格式大小判断
        beforeAvatarUpload(file) {
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const fileFormat = fileName.substring(index + 1, fileName.length);
            const isName = fileFormat === "xls" || fileFormat === "xlsx";

            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isName) {
                this.$message.error("上传文件只能是 xls/xlsx 格式!");
                this.fileList = [];
            }
            if (!isLt30M) {
                this.$message.error("上传文件大小不能超过 30MB!");
                this.fileList = [];
            }
            return isName && isLt30M;
        },
        // 删除银行数据导入记录
        deleteBankDataFun(index, id) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.deleteBankData({
                        orderCheckBatchId: id
                    }).then(() => {
                        this.tableData.splice(index, 1);
                    });
                })
                .catch(() => {
                    this.$message.info("已取消删除");
                });
        },
        // 触发银行数据核卡
        triggerCheckFun(id) {
            this.$confirm("是否开始匹配?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.triggerCheck({
                        orderCheckBatchId: id
                    }).then(() => {
                        // 查询银行数据导入记录
                        this.getBankDataList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        }
    },
    mounted() {
        // 查询银行数据导入记录
        this.getBankDataList();
    }
};
</script>

<style>
.jiesuan {
    color: #333;
    margin-top: 4px;
}
</style>
